<template>
  <div class="login">
    <van-button type="primary" @click="isPopupShow">微信登录</van-button>
    <van-popup v-model="popupShow">
      <div class="login-wrap">
        <van-cell class="cell-header"><p>微信登录</p></van-cell>
        <van-cell>
          <van-image
            fit="cover"
            round
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
          <p>名片通讯录 申请获取一下信息:</p>
        </van-cell>
        <van-cell class="info"
          ><div class="dot"></div>
          获得你的公开信息(昵称、头像等)</van-cell
        >
        <van-cell class="cell-footer">
          <div class="yes" @click="$router.push('/home/goods')">允许</div>
          <div class="no" @click="popupShow = false">拒绝</div>
        </van-cell>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      popupShow: false
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    isPopupShow() {
      this.popupShow = true
    }
  }
}
</script>

<style scoped lang="less">
.login {
  min-height: 100vh;
  .van-button {
    left: 50%;
    top: 50vh;
    transform: translateX(-50%);
  }
}
.login-wrap {
  width: 460px;
  background-color: #fff;
  .cell-header {
    p {
      font-size: 38px;
      line-height: 80px;
      font-weight: 500;
    }
  }
  .van-cell {
    padding: 0;
    .van-cell__value {
      text-align: center;
      font-size: 30px;
      padding: 5px 0;
    }
    .van-image {
      width: 100px;
      height: 100px;
      margin: 5px 0;
    }
    p {
      margin: 0;
    }

    .dot {
      display: inline-block;
      margin: 10px;
      width: 20px;
      height: 20px;
      vertical-align: middle;
      background-color: #636267;
      font-size: 30px;
      border-radius: 50%;
    }
  }
  .cell-footer {
    div {
      display: flex;
      div {
        flex: 1;
        align-items: center;
        justify-content: center;
        font-size: 36px;
        height: 60px;
      }
      .yes {
        color: #07c160;
        border-right: 1px solid #eee;
      }
    }
  }
}
</style>
